* { margin: 0; padding: 0; outline:none !important;}
ol,ul,li{list-style-type:none;}
img{border:0px; vertical-align:middle;}
form {margin:0px;padding:0px;}
.clear { height:0px; clear: both; overflow:hidden; }
input ,select {font-family:"Microsoft YaHei";}
::-webkit-input-placeholder { color:#747a6b; }
html { overflow: hidden; height:100%;}

body { font-size: 14px; line-height:1.7; color: #333333; background: url(/images/login/bg.jpg) center bottom no-repeat; background-size: cover; font-family:"Microsoft YaHei";}

#wrap { position:absolute; left:0; top:0; right:0; bottom:0;}

.login_main { position:fixed; left:12%; top:50%; margin-top:-220px; width:638px; height:404px; z-index:990; background: rgba(118,225,255,0.13); border: 2px rgba(118,225,255,0.7) solid; box-shadow:0 1px 22px rgba(116,211,255,0.8); border-radius: 4px; }
.login_main .line { position: absolute; left: 50%; top: 0; margin-left: -570px; margin-top: -210px; z-index: 991;}
.login_main .line img { display: block; animation: login_line 5s 0s linear infinite; }

@keyframes login_line{
0% { transform: scale(1); }
50% { transform: scale(1.2); }
100% { transform: scale(1); }
}

.logo { padding: 20px 0 10px 0; }
.logo img{ display:block; margin: 0 auto; }

.tit { color: #fff; text-align: center; font-size: 28px; letter-spacing: 1px; line-height: 40px; margin-bottom: 30px; }

.login_box { position: relative; z-index: 992;}
.login_box .item{ width:380px; margin:0 auto 16px auto; }
.login_box .item .input{ width:378px; height:42px; line-height:42px; font-size:16px; color:#333333; border:1px #e6e6e6 solid; text-align:left; background:#ffffff; text-indent:56px; border-radius:4px; }
.login_box .item .input1{ background:url(/images/login/user1.png) 16px center no-repeat #ffffff; }
.login_box .item .input2{ background:url(/images/login/password1.png) 16px center no-repeat #ffffff;  }
.login_box .item .input:focus { outline:none; border:1px #0785fd solid; box-shadow:0px 0px 10px rgba(7,133,253,0.2); }

.btnbox{ padding-top:20px; margin-bottom:20px; }
.btnbox .btn{ display:block; margin:0 auto; width:380px; height:42px; font-size:18px; line-height:42px; text-align:center; color:#fff; background:#2E8B57; border:none; cursor:pointer; border-radius:4px; transition:background 300ms ease; -webkit-transition:background 300ms ease; box-shadow:0px 3px 10px rgba(0,0,0,0.1); }
.btnbox .btn:hover{ background:#2E8B57; color:#fff;}

.tip {  line-height:36px; text-align:center; color:#e4a50a; font-size:14px; position: absolute; left: 0; right: 0; top: 105px; }
.tip img{ vertical-align:middle; margin-right:8px; margin-bottom:2px; }

.fcopy { text-align:center; color:#fff; opacity: 0.6; }

.top_line { position: absolute; left: 1200px; top:-71px; margin-left: -608px; z-index: 2;}
.top_line img { display: block; animation: toplight 5s 0s linear infinite; }

@keyframes toplight{
0% { opacity: 0.5; transform: scale(1); }
50% { opacity: 1; transform: scale(1.5); }
100% { opacity:0.5; transform: scale(1); }
}

.foot_line { position: absolute; left: 0; bottom:-50px; z-index: 2;}
.foot_line img { display: block; animation: footline 5s 0s linear infinite; }

@keyframes footline{
0% { opacity: 0.5; }
50% { opacity: 1; }
100% { opacity:0.5; }
}


.right_line { position: absolute; right: -400px; top: 60%; z-index: 2;}
.right_line img { display: block; animation: footline 5s 0s linear infinite; }


#particles-js { position: absolute; left: 0; right: 0; bottom: 0; top: 0; z-index: 1;}
#particles-js canvas { display: block;}